<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <style>
        body{width:100%;min-height:100%}
        .login-bg{background:url(../images/xk.jpeg) no-repeat center;background-size:cover;overflow:hidden}
        #app{margin:220px auto 0 auto;min-height:420px;max-width:420px;padding:40px;background-color:#fff;margin-left:auto;margin-right:auto;border-radius:4px;box-sizing:border-box}
        #app a.logo{display:block;height:58px;width:167px;margin:0 auto 30px auto;background-size:167px 42px}
        #app .message{margin:10px 0 0 -58px;padding:18px 10px 18px 60px;background:#23b7e5;position:relative;color:#fff;font-size:20px}
        #app #darkbannerwrap{width:18px;height:10px;margin:0 0 20px -58px;position:relative}
    </style>
</head>
<body class="login-bg">
<div id="app">
    <div class="message">系统登录</div>
    <div id="darkbannerwrap"></div>
    <div class="x-body">
        <el-form :model="loginVo" :rules="rules" ref="loginFormRef" label-width="120px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="loginVo.loginName"></el-input>
            </el-form-item>
            <el-form-item label="密码 " prop="password">
                <el-input v-model="loginVo.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login()" style="text-align: center">登录</el-button>
                <el-button @click="clearAll()" style="text-align: center">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
<script src="lib/layui/layui.js" charset="utf-8"></script>
<script src="js/x-layui.js" charset="utf-8"></script>
<!--导入Vue依赖包-->
<script src="/js/vue.js" charset="utf-8"></script>
<!-- 引入Element组件库 -->
<script src="/js/index.js"></script>
<!--导入Axios依赖包-->
<script src="/js/axios.js" charset="utf-8"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            loginVo:{},
            rules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入用户密码', trigger: 'blur' },
                    { min: 4,max: 8, message: '长度必须大于4、小于8个字符', trigger: 'blur' }
                ],
            }
        },
        methods:{
            //表达重置
            clearAll() {
                this.$refs.loginFormRef.resetFields();
            },
            // 登录
            login(){
                axios.post("/estate/manager/login",this.loginVo).then((res)=>{
                    if(res.data.flag){
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                    }
                    sessionStorage.setItem("user",res.data.data.loginName)
                    sessionStorage.setItem("userId",res.data.data.id)
                    setTimeout("window.location.href='index.html'",2000);return false;
                });
            },

        },
        created:function(){
            layui.use(['element','layer','form'], function(){
                $ = layui.jquery;//jquery
                lement = layui.element();//面包导航
                layer = layui.layer;//弹出层
                form = layui.form();
            });
        }
    });
</script>
</body>
</html>